import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const GradeComparison = () => {
  const [data, setData] = useState([
    {
      clasName: '一班',
      type: '理想信念',
      value: 1,
    },
    {
      clasName: '一班',
      type: '实践服务',
      value: 9,
    },
    {
      clasName: '一班',
      type: '文化艺术',
      value: 4,
    },
    {
      clasName: '一班',
      type: '学术科技',
      value: 9,
    },
    {
      clasName: '一班',
      type: '社会工作',
      value: 5,
    },
    {
      clasName: '一班',
      type: '体育素质',
      value: 9,
    },
    {
      clasName: '二班',
      type: '理想信念',
      value: 9,
    },
    {
      clasName: '二班',
      type: '实践服务',
      value: 2,
    },
    {
      clasName: '二班',
      type: '文化艺术',
      value: 3,
    },
    {
      clasName: '二班',
      type: '学术科技',
      value: 7,
    },
    {
      clasName: '二班',
      type: '社会工作',
      value: 8,
    },
    {
      clasName: '二班',
      type: '体育素质',
      value: 7,
    },
    {
      clasName: '三班',
      type: '理想信念',
      value: 9,
    },
    {
      clasName: '三班',
      type: '实践服务',
      value: 3,
    },
    {
      clasName: '三班',
      type: '文化艺术',
      value: 9,
    },
    {
      clasName: '三班',
      type: '学术科技',
      value: 5,
    },
    {
      clasName: '三班',
      type: '社会工作',
      value: 9,
    },
    {
      clasName: '三班',
      type: '体育素质',
      value: 5,
    },
    {
      clasName: '四班',
      type: '理想信念',
      value: 9,
    },
    {
      clasName: '四班',
      type: '实践服务',
      value: 3,
    },
    {
      clasName: '四班',
      type: '文化艺术',
      value: 9,
    },
    {
      clasName: '四班',
      type: '学术科技',
      value: 5,
    },
    {
      clasName: '四班',
      type: '社会工作',
      value: 7,
    },
    {
      clasName: '四班',
      type: '体育素质',
      value: 9,
    },
    {
      clasName: '五班',
      type: '理想信念',
      value: 2,
    },
    {
      clasName: '五班',
      type: '实践服务',
      value: 9,
    },
    {
      clasName: '五班',
      type: '文化艺术',
      value: 7,
    },
    {
      clasName: '五班',
      type: '学术科技',
      value: 9,
    },
    {
      clasName: '五班',
      type: '社会工作',
      value: 6,
    },
    {
      clasName: '五班',
      type: '体育素质',
      value: 9,
    },
    {
      clasName: '六班',
      type: '理想信念',
      value: 4,
    },
    {
      clasName: '六班',
      type: '实践服务',
      value: 9,
    },
    {
      clasName: '六班',
      type: '文化艺术',
      value: 2,
    },
    {
      clasName: '六班',
      type: '学术科技',
      value: 9,
    },
    {
      clasName: '六班',
      type: '社会工作',
      value: 6,
    },
    {
      clasName: '六班',
      type: '体育素质',
      value: 9,
    },
    {
      clasName: '七班',
      type: '理想信念',
      value: 9,
    },
    {
      clasName: '七班',
      type: '实践服务',
      value: 2,
    },
    {
      clasName: '七班',
      type: '文化艺术',
      value: 9,
    },
    {
      clasName: '七班',
      type: '学术科技',
      value: 9,
    },
    {
      clasName: '七班',
      type: '社会工作',
      value: 9,
    },
    {
      clasName: '七班',
      type: '体育素质',
      value: 9,
    },
    {
      clasName: '八班',
      type: '理想信念',
      value: 2,
    },
    {
      clasName: '八班',
      type: '实践服务',
      value: 9,
    },
    {
      clasName: '八班',
      type: '文化艺术',
      value: 2,
    },
    {
      clasName: '八班',
      type: '学术科技',
      value: 9,
    },
    {
      clasName: '八班',
      type: '社会工作',
      value: 9,
    },
    {
      clasName: '八班',
      type: '体育素质',
      value: 9,
    },
    {
      clasName: '九班',
      type: '理想信念',
      value: 9,
    },
    {
      clasName: '九班',
      type: '实践服务',
      value: 2,
    },
    {
      clasName: '九班',
      type: '文化艺术',
      value: 9,
    },
    {
      clasName: '九班',
      type: '学术科技',
      value: 9,
    },
    {
      clasName: '九班',
      type: '社会工作',
      value: 9,
    },
    {
      clasName: '九班',
      type: '体育素质',
      value: 2,
    },
  ]);

  useEffect(() => {}, []);

  const config = {
    data,
    isStack: true,
    xField: 'clasName',
    yField: 'value',
    seriesField: 'type',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'bottom', 'middle'
    },
    interactions: [
      {
        type: 'active-region',
        enable: false,
      },
    ],
    connectedArea: {
      style: (oldStyle, element) => {
        return {
          fill: 'rgba(0,0,0,0.25)',
          stroke: oldStyle.fill,
          lineWidth: 0.5,
        };
      },
    },
  };

  return <Column {...config} />;
};

export default GradeComparison;
